<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue.js"></script>
</head>

<body>
  <!-- 根组件模板 -->
  <div id="app">
    <son :sonnum1="num1" :sonnum2="num2" @parchangenum1="parentnum1" @parchangenum2="parentnum2"></son>
  </div>

  <!-- 子组件模板 -->
  <template id="son">
    <div>
      <!-- 注意嗷!!! 子组件里不要直接修改props中来自父组件的数据 -->
      <!-- <input type="number" v-model="num1"> -->
      <input type="number" :value="num1" @input="changenum1">
      <!-- props 是接收的来自父组件的数据 -->
      <h2>props : {{sonnum1}}</h2>
      <!-- data 是子组件自身的数据 -->
      <h2>data : {{num1}}</h2>
      <!-- <input type="number" v-model="num2"> -->
      <input type="number" :value="num2" @input="changenum2">
      <h2>props : {{sonnum2}}</h2>
      <h2>data : {{num2}}</h2>
    </div>
  </template>
  <script>
    const son = {
      template: "#son",
      // 接收来自根组件的数据
      props: {
        sonnum1: {
          // 在做这个案例的时候, 发现了一个很有趣的现象, 如果将这里的type的值设置为 0 , 那么这个sonnum1 就可以接收任何类型的数据
          type: Number
        },
        sonnum2: {
          type: Number
        }
      },
      // 子组件的data必须是一个函数, 防止变量泄露
      data() {
        return {
          num1: this.sonnum1,
          num2: this.sonnum2
        }
      },
      methods: {
        changenum1(event) {
          // 处理num1, 然后向根组件发送
          this.num1 = event.target.value;
          this.$emit("parchangenum1", this.num1);
          // 处理num2, 然后向根组件发送
          this.num2 = this.num1 * 100;
          this.$emit("parchangenum2", this.num2);
        },
        changenum2(event) {
          this.num2 = event.target.value;
          this.$emit("parchangenum2", this.num2)
          this.num1 = this.num2 / 100;
          this.$emit("parchangenum1", this.num1)
        }
      }
    }

    const app = new Vue({
      el: "#app",
      data: {
        num1: 1,
        num2: 2
      },
      components: {
        son
      },
      methods: {
        // 父组件处理从子组件接收来的数据
        parentnum1(num) {
          this.num1 = parseFloat(num)
        },
        parentnum2(num) {
          this.num2 = parseFloat(num)
        }
      }
    })
  </script>
</body>

</html>